<template>
    <div class="procedureNotice">
        <top @getId='getId' :name='topName' @fullscreen='fullscreen' @setBoard="setBoard"></top>

        <div class="boardContainer">
            <div class="cardList scrollNone">
                <div class="card" :style="{width:setWidth}" v-for="item in procedureList" :key="item.processId">
                    <div class="card-item" :style="{fontSize:setFont}">
                        <div class="cardTitle">
                            <span>{{item.processName}}</span>
                        </div>
                        <div class="card-body"
                            :class="{noReport:item.groupDetail === null || !item.groupDetail.length}">
                            <div class="piebox" v-for="(i,index) in item.groupDetail" :key="index"
                                :class="handelClass(item.groupDetail)">
                                <div class="boxInner" :class="handelClass(item.groupDetail)">
                                    <span class="productName">{{i.productName}}</span>
                                    <span class="count">{{i.workReportNum}}</span>
                                    <span class="reportName"
                                        v-show="item.groupDetail.length < 2">{{i.workReportUserName}}</span>
                                    <span class="time"
                                        v-show="item.groupDetail.length < 2">{{handleTime(i.workReportTime)}}</span>
                                </div>
                            </div>
                            <div v-if="item.groupDetail === null || !item.groupDetail.length"
                                style="height:100%;display: flex;align-items: center;justify-content: center;font-size:1.6em">
                                <span>无报工</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <setBoard ref="setBoard" @confirm="confirm"></setBoard>
    </div>
</template>

<script>
    const activeIndex = 0
    import audioUrl from '@/assets/audio/t-rex-roar.mp3'
    import {
        getSearchCache
    } from '@/api/produceController'
    import {
        workReportGroupByProcess
    } from '@/api/lampController'
    import setBoard from './setBoard.vue'
    import top from './top.vue'
    export default {
        data() {
            return {
                topName: '工序看板',
                procedureList: [],
                processRouterId: '',
                windowMsg: null,
                speechList: [],
                interfaceFlag: true,
                cacheInfo: {}
            }
        },
        computed: {
            setWidth() {
                return (100 / this.cacheInfo.number) + '%'
            },
            setFont() {
                return (90 / this.cacheInfo.number) + 'px'
            },
            handleTime() {
                return time => {
                    return this.utils.formatTime(time, 'MM-dd hh:mm')
                }
            },
            handelClass() {
                return detail => {
                    return detail !== null && detail.length >= 2 ? 'multiple' : 'single'
                }
            }
        },
        components: {
            setBoard,
            top
        },
        mounted() {
            this.getSearchCacheFn({
                cacheName: 'procedure:set',
                type: 0
            })
            this.windowMsg = new window.SpeechSynthesisUtterance();
        },
        methods: {
            //分组id
            getId(processRouterId) {
                this.processRouterId = processRouterId
                this.handleInterface()
            },
            //看板列表
            workReportGroupByProcessFn: async function (data) {
                const res = await workReportGroupByProcess(data)
                const {
                    interval
                } = this.cacheInfo
                if (res.code == 200) {
                    this.procedureList = res.data.dataList
                    if (res.data.voiceCallsInfos !== null && res.data.voiceCallsInfos?.length > 0) {
                        res.data.voiceCallsInfos.forEach(i => {
                            this.speechList.push({
                                text: i.text,
                                time: 0
                            })
                        })
                        if (this.speechList.length && this.interfaceFlag) {
                            this.play(this.speechList[activeIndex])
                        }
                    }
                    clearInterval(window.procedureTimer)
                    window.procedureTimer = setInterval(() => {
                        this.handleInterface()
                    }, interval * 1000)
                }
            },
            //获取缓存信息
            getSearchCacheFn: async function (data) {
                const res = await getSearchCache(data)
                this.cacheInfo = res.data !== null ? JSON.parse(res.data) : {
                    number: 9,
                    interval: 10,
                    intervalTime:0,
                    playTimes:2,
                    roundNum:0,
                    haveWorkReport: false
                }
            },
            //全屏
            fullscreen(isFull) {
                let elem = document.querySelector(".procedureNotice");
                isFull ? elem.requestFullscreen() : document.exitFullscreen()
            },
            setBoard() {
                let jsonData = JSON.parse(JSON.stringify(this.cacheInfo))
                this.$refs.setBoard.open(jsonData)
            },
            confirm(form) {
                this.cacheInfo = form
                this.handleInterface()
            },
            handleInterface() {
                const {haveWorkReport,intervalTime,roundNum} = this.cacheInfo
                this.workReportGroupByProcessFn({
                    processRouterId: this.processRouterId,
                    haveWorkReport,
                    intervalTime,
                    roundNum,
                    verifyState: 0
                })
            },
            removeTag(tagList) {
                tagList.forEach(i => i.remove())
            },
            play(data) {
                this.interfaceFlag = false
                const audioNode = document.createElement('audio')
                const screenNode = document.querySelector('.procedureNotice')
                audioNode.src = audioUrl
                audioNode.autoplay = 'autoplay'
                screenNode.appendChild(audioNode)
                if (!this.windowMsg) {
                    this.windowMsg = new window.SpeechSynthesisUtterance()
                }
                this.windowMsg.text = data.text;
                this.windowMsg.rate = 0.8;
                this.windowMsg.onerror = (e) => {
                    if (e.error === 'interrupted') return
                    this.utils.showMsg('系统错误,请重新发起工序请求', 'error')
                }
                this.windowMsg.onend = () => {
                    this.speechList[activeIndex].time++
                    if (this.speechList[activeIndex].time > this.cacheInfo.playTimes - 1) {
                        this.speechList.splice(activeIndex, 1)
                    }
                    if (this.speechList.length === 0) {
                        this.interfaceFlag = true
                        //移除所有标签
                        this.removeTag(document.querySelectorAll('audio'))
                        speechSynthesis.cancel()
                        return
                    }
                    this.play(this.speechList[activeIndex])
                }
                audioNode.addEventListener('ended', () => {
                    speechSynthesis.speak(this.windowMsg);
                })
            }
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(window.procedureTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .procedureNotice {
        padding: 20px;
        background-color: #000;
        overflow-y: auto;
        height: 100%;

        .top {
            height: 56px;
            margin-bottom: 20px;
        }

        .boardContainer {
            border: 1px solid rgba(58, 200, 243, .8);
            height: calc(100% - 76px);
            padding: 10px 0 15px 15px;

            .cardList {
                display: flex;
                flex-wrap: wrap;
                height: calc(100% - 19px);
                overflow-y: auto;
                align-content: flex-start;

                .card {
                    padding-right: 15px;

                    .card-item {
                        margin-top: 15px;

                        .cardTitle {
                            background-color: #e3fdf7;
                            font-size: 1.4em;
                            line-height: 2.5em;
                            color: #000;
                            padding: 0 0.5em 0 0.5em;
                            text-align: center;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            border-radius: 8px 8px 0 0;
                            font-weight: 600;
                        }

                        .card-body {
                            height: 14em;
                            color: #fff;
                            background-color: rgb(153, 0, 0);
                            // padding: 1em 0 1em 0;
                            border-radius: 0 0 8px 8px;
                            display: flex;
                            flex-direction: column;


                            .piebox {
                                .boxInner {
                                    display: flex;
                                }

                                .productName,
                                .count,
                                .time,
                                .reportName {
                                    display: inline-block;
                                    font-size: 1.6em;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                            }
                        }

                        .piebox.single {
                            height: 100%;

                            .boxInner {
                                height: 100%;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                text-align: center;

                                .productName {
                                    width: 100%;
                                }
                            }
                        }

                        .piebox.multiple {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            width: 100%;

                            .boxInner {
                                width: 100%;

                                .productName {
                                    padding-left: 0.5em;
                                    width: 70%;
                                    text-align: left;
                                }

                                .count {
                                    padding-left: 0.5em;
                                }
                            }
                        }

                        .noReport {
                            background-color: rgb(153, 153, 153)
                        }
                    }
                }
            }
        }
    }
</style>